<template>
    <div class="item" v-if="Object.keys(song).lenght !== 0" @click="listItemClick">
        <div class="item-img" @mouseover="isShowPlay = true" @mouseleave="isShowPlay = false">
            <transition name="el-fade-in-linear">
                <div class="mask-playicon" v-show="isShowPlay">
                    <span class="iconfont icon-play"></span>
                </div>
            </transition>
            <transition name="el-zoom-in-top">
                <div class="mask1" v-show="!isShowPlay">
                    <span class="iconfont icon-yinle"></span>
                    <span>{{song.playCount | formatNum}}</span>
                </div>
            </transition>
            <transition name="el-zoom-in-bottom">
                <div class="mask2" v-show="!isShowPlay" v-if="song.creator">
                     <span class="iconfont">&#xe841;</span>
                     <span>{{song.creator.nickname}}</span>
                </div>
            </transition>
            <div class="song-img">
                <img v-lazy="song.coverImgUrl || song.picUrl"/>
            </div>
        </div>
        <div class="item-text">
            <span>{{song.name}}</span>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        song:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {
            isShowPlay:false,// 是否展示图标遮罩层的显示与隐藏 
        }
    },
    methods:{
        // 点击跳转的歌单详情
        listItemClick(){
            this.$router.push("/songlistdetail/" + this.song.id);
            this.isShowPlay = false
        }
    },
    created(){
        
    },
}
</script>
<style lang="less" scoped>
    .item {
	width: 100%;
	height: 100%;
	cursor: pointer;
	margin-bottom: 15px;
	.item-img {
		position: relative;
		img {
			width: 100%;
		}
		.mask1 {
			position: absolute;
			top: 0;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: right;
			color: #fff;
			font-size: 13px;
			padding-right: 7px;
			span {
				padding-left: 5px;
			}
		}
		.mask2 {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: left;
			color: #fff;
			font-size: 13px;
			padding-left: 7px;
			span {
				padding-right: 5px;
			}
		}
	}
	.item-text {
		margin: 5px 0;
	}
}
</style>